<template>
  <div v-if="value">
    <Card>
      <p slot="title">
        <Breadcrumb separator=">">
          <Breadcrumb-item href="/">个人中心</Breadcrumb-item>
          <Breadcrumb-item href=""><span @click="bindSelect">安全中心</span>
          </Breadcrumb-item>
          <Breadcrumb-item>修改电子邮箱</Breadcrumb-item>
        </Breadcrumb>
      </p>

      <Form class="baseform" :model="formItem" :rules="mailValidate" label-position="top">
        <FormItem label="请输入新的电子邮箱" prop="userEmail">
          <Input v-model="formItem.userEmail" placeholder="请输入新的电子邮箱"></Input>
        </FormItem>
        <FormItem>
          <Button long type="success" @click="save" value="">立即修改 </Button>
        </FormItem>
      </Form>
    </Card>

  </div>
</template>

<script>
// @ is an alias to /src

import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
import ajax from '../lib/ajax'

@Component
export default class BandingEmail extends Vue {
  @Prop({ type: Boolean, default: false }) value
  get userInfo() {
    return this.$store.getters['session/user']
  }

  formItem = {
    userEmail: ''
  }

  @Emit('bindSelect')
  bindSelect() {
    return '2'
  }

  save() {
    this.$Modal.confirm({
      title: '确认',
      content: '确认要修改邮箱码吗',
      onOk: () => {
        ajax.post('changeEmail', this.formItem).then(result => {
          if (result.data.code === 200) {
            this.$store.state.session.user.userEmail = this.formItem.userEmail
            this.$Message.success('恭喜你修改成功')
          }
        })
      },
      onCancel: () => {
        this.$Message.info('取消成功')
      }
    })
  }

  mailValidate = {
    userEmail: [
      { required: true, message: '邮箱不能为空', trigger: 'blur' },
      { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
    ]
  }
}
</script>
<style scoped>
.baseform {
  text-align: left;
  font-size: 1.2rem;
  width: 60%;
  margin: 10rem auto;
  min-height: 300px;
}
.user_info_title {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.user_info_item {
  font-size: 1.4rem;
  padding: 1rem 0;
}
.user_info_item_detail {
  color: #999;
  padding-right: 1rem;
}
.des {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  color: #999;
}
</style>
